<template>
  <div class="files">
    <div class="serch">
      <span>选择公司： </span>
      <el-select v-model="company" placeholder="请选择">
        <el-option
          v-for="item in companys"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span style="margin-left:100px">选择部门： </span>
      <el-select v-model="department" placeholder="请选择">
        <el-option
          v-for="item in departments"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span style="margin-left:100px">员工姓名： </span>
      <el-select v-model="name" placeholder="请选择">
        <el-option
          v-for="item in names"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="danger" round style="margin-left:100px">搜索</el-button>
    </div>
    <div class="notice">
      <i class="el-icon-message-solid" /> 重要提醒：有<a>10</a>位员工的合同即将到期，请尽快处理！<span>立即处理>></span>
    </div>
    <div class="table">
      <div class="out"><span><img src="../../assets/contract/icon_daochu.png" alt=""><a>导出</a></span></div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="姓名" align="center"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column>
        <el-table-column prop="name" label="现合同起始日" align="center" />
        <el-table-column prop="address" label="现合同到期日" align="center" />
        <el-table-column prop="address" label="合同公司" align="center" />
        <el-table-column prop="address" label="所属部门" align="center" />
        <el-table-column prop="address" label="合同类型" align="center" />
        <el-table-column prop="address" label="合同续签次数" align="center" />
        <el-table-column prop="address" label="操作" align="center" />
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      company: '',
      department: '',
      name: '',
      companys: [{
        value: '选项1',
        label: '黄金糕'
      }],
      departments: [{
        value: '选项1',
        label: '黄金糕'
      }],
      names: [{
        value: '选项1',
        label: '黄金糕'
      }],
      tableData: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.files{
  height: calc(100vh - 170px);
  overflow: hidden;
}
.serch{
  padding-top:32px;
  padding-left:40px;
  height:100px;
  width:100%;
  background:#fff;
}
/deep/.el-select > .el-input{
  width:250px;
}
/deep/.el-button {
  width: 130px;
  background: #E30A0D;
}
.notice{
  height:35px;
  line-height: 35px;
  border:1px solid #F57605;
  border-radius:10px;
  margin:20px 0;
  background:#FFF1E1;
  padding-left:20px;
  font-size:12px;
}
.notice>i{
  color:#E30A0D;
  font-size:16px;
  margin-right:5px;
}
.notice>a{
  color:#F57605;
  font-weight:bold;
  margin:0 3px;
}
.notice>span{
  float:right;
  color:#F57605;
  padding-right:20px;
  cursor: pointer;
}
/deep/.el-table th{
  background:#F7F7F7;
}
/deep/.el-table th.is-leaf{
  border:none;
}
/deep/.el-table thead{
  color:#666;
}
.page{
  text-align: center;
  margin-top:60px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #E30A0D;
}
.out{
  padding:30px 0 10px 0;
  overflow: hidden;
}
.out>span{
  float:right;
  padding-right:30px;
}
.out>span>a{
  margin-left:10px;
}
.table{
  background:#fff;
}
@media screen and (max-width: 1695px){
  /deep/.el-select > .el-input{
    width:200px;
  }
}
@media screen and (max-width: 1550px){
  /deep/.el-select > .el-input{
    width:150px;
  }
}
@media screen and (max-width: 1400px){
  /deep/.el-select > .el-input{
    width:90px;
  }
}
</style>
